<template>
	<view class="content">
		<cu-custom bgColor="bgmain" :isBack="true">
			<view slot="content">商品</view>
		</cu-custom>
		<!-- <view style="">
			<swiper autoplay="true" class="swiper" circular="true" style="height: 400rpx;">
				<swiper-item v-for="(item,index) in lblist" :key="index">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="search margin">
		    <image
		        class="icon"
		        src="/static/search.png"
		        mode="scaleToFill"
		    />
		    <input
		        v-model="search_value"
		        placeholder="搜索"
		        placeholder-class="input-placeholder"
		    />
		   
		</view>

		<image @click="gomycard()" v-if="banner" :src="banner"
			style="margin: 32rpx auto 1rpx auto; width: 715rpx;height: 380rpx;border-radius: 16rpx;box-shadow: 0 0 16rpx #2979FF;"
			mode=""></image>
		<!-- <view style="display: flex;flex-direction: column; width: 720rpx;margin: 12rpx auto;background: white;border-radius: 16rpx;">
			<view style="color: #2979FF;font-weight: bold;">
				免费领取积分卡
			</view>
		</view> -->
		<view class="tab">
			<view class="tablist">
				<view class="navlist" v-for="(item,index) in nav" :key="index" @click="fenlei(item)">
					<image :src="item.image" mode="" class="icon"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="dhop">
			<view @click="duihuans(u)" v-for="(u,index) in list" v-if="list.length>0" class="listss" :key="index">
				<image :src="u.image"
					style="width: 350rpx;height: 350rpx;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;"
					mode=""></image>
				<view class="u-line-1"
					style="width: 320rpx; color: rgb(41,121,255);font-size: 30rpx;font-weight: bold;margin: 8rpx auto;text-align: center;">
					{{u.title}}
				</view>
				<view style="color: #555555;font-size: 28rpx;margin-top: 8rpx;">
					{{u.integral}}积分
				</view>
				<view style="margin: 12rpx auto;">
					<view class="duihuan" >积分兑换</view>
				</view>
			</view>

			<view class="zanwu" v-if="list.length==0">
				<view class="cuIcon-cart imng"></view>
				<view class="">暂无商品</view>
			</view>
		</view>
		<jifen-footer flg="商品"></jifen-footer>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				bgyx: false,
				lblist: ['https://img.zcool.cn/community/01f4575568e4ed000001271684a878.jpg@1280w_1l_2o_100sh.jpg'],
				banner: '',
				list: [],
				page: 1,
				nav: '',
				c_id: '',
				search_value:''
			}
		},
		watch: {
		    search_value(){
				this.setData({
				    list: [],
				    page: 1,
				});
		        this.getindexinfo();
				
		    }
		},
		onLoad() {
			// var that = this
			this.getnav()
			this.getindexinfo()
		},
		onShareAppMessage() {

		},
		onReachBottom() {
			if (this.list.length < this.count) {
				this.page += 1
				this.getindexinfo()
			} else {
				this.tips.tips('没有其他商品了')
			}
		},
		methods: {
			duihuans(e) {
				uni.navigateTo({
					url: '/gc_school/pages/jifen/shop_info?id=' + e.id
				})
			},
			gogoodinfo: function(good) {
				uni.navigateTo({
					url: '/pages/index/goodsinfo?id=' + good.id
				})
			},
			gomycard: function() {
				uni.switchTab({
					url: '/pages/center/index'
				})
			},
			fenlei(e) {
				this.c_id = e.id
				this.list = []
				
				this.getindexinfo()
			},
			getnav: function() {
				var that = this
				uni.showLoading({
					title: '加载中'
				})

				app.globalData.util.request({
					url: 'Knowledgeclass/index',
					data: {
						s_id: uni.getStorageSync('schoolId')
					},
					success(res) {
						uni.hideLoading()
						if (res.data.status == 200) {
							that.nav = res.data.data
							// that.c_id = that.nav[0].id
							// console.log('分类', res)
						}

					}
				}, true)
			},
			getindexinfo: function() {
				var that = this
				uni.showLoading({
					title: '加载中'
				})

				app.globalData.util.request({
					url: 'Knowledgelist/index',
					data: {
						title:that.search_value,
						c_id: that.c_id,
						page: that.page,
						s_id: uni.getStorageSync('schoolId')
					},
					success(res) {
						uni.hideLoading()
						if (res.data.status == 200) {
							that.list = [...that.list, ...res.data.data.list]
							that.count = res.data.data.count
							// console.log(999, res)
						}

					}
				}, true)
			}
		}
	}
</script>
<style>
	page {
		background: #eee;
	}
</style>
<style lang="scss" scoped>
	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #2b2b41;
	}

	.button-demo {
		margin-top: 80rpx;
	}

	.link-demo {
		margin-top: 80rpx;
	}

	.dhop {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 16rpx;
		padding-bottom: 196rpx;

		.listss {
			width: 350rpx;
			display: flex;
			margin: 10rpx 0;
			align-items: center;
			flex-direction: column;
			background: white;
			border-radius: 16rpx;

			.duihuan {
				background-color: #2979ff;
				color: #fff;
				text-align: center;
				padding: 4rpx 20rpx;
				border-radius: 28rpx;
			}
		}
	}

	.tab {

		// margin: 5px 15px;
		.tablist {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			background: #fff;
		}

		.navlist {
			width: 25%;
			align-items: center;
			flex-direction: column;
			display: flex;

			.icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
		}


	}

	.zanwu {
		position: absolute;
		display: flex;
		align-items: center;
		left: 50%;
		flex-direction: column;
		transform: translateX(-50%);
		margin-top: 360rpx;

		.imng {
			font-size: 80rpx;
		}
	}
	.search {
	    width: 690rpx;
	    height: 72rpx;
	    background: #fff;
	    border-radius: 36rpx;
	    position: relative;
	    z-index: 999;
	    display: flex;
	    align-items: center;
	    position: relative;
	    // z-index: 9999999;
	
	    input {
	        height: 72rpx;
	        margin-left: 10rpx;
	        width: 100%;
	        position: relative;
	        z-index: 9999;
	    }
	
	    .icon {
	        width: 36rpx;
	        height: 36rpx;
	        margin-left: 30rpx;
	    }
	}
	
</style>